{% load static %}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- 引入核心的css文件 -->
    <link href="{% static "layui/css/layui.css" %}" rel="stylesheet" media="all">
    <!-- 引入核心的js文件-->
    <script src="{% static "layui/layui.js" %}"></script>
    <script src="{% static "js/jquery-3.6.0.min.js" %}"></script>

</head>

<body>
<!--搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<form class="dataFrm">
    {% csrf_token %}
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">源ip:</label>
            <div class="layui-input-inline">
                <input type="tel" name="source_ip" id="source_ip" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">目的IP:</label>
            <div class="layui-input-inline">
                <input type="text" name="destination_ip" id="destination_ip" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <button th:style=" ${#lists.contains(session.aclValue,'101005')}?'':'display:none'" type="button"
                    class="layui-btn  search_btn  layui-btn-normal layui-icon layui-icon-search select-btn"
                    id="search_btn">搜索
            </button>
            <button type="reset" class="layui-btn  layui-btn-warm    layui-icon layui-icon-refresh">重置</button>

        </div>

    </div>
    </div>


</form>
<!--搜索条件结束 -->
<!-- 数据表格开始 -->
<table class="layui-hide" id="allrsyncTable" lay-data="id:allrsyncTable" lay-filter="allrsyncTable"></table>
<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" id="allDelete" lay-event="allDelete">批量删除</button>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-border-red layui-btn-sm " lay-event="startrsync">开始rsync</a>

</script>
<!-- 数据表格结束 -->

{% csrf_token %}
<script type="text/javascript">


    layui.use(['form', 'layer', 'table', 'laytpl', 'laydate', 'util'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laytpl = layui.laytpl,
            table = layui.table,
            laydate = layui.laydate,
            util = layui.util;


        //渲染数据表格 刚打开网页的时候 加载的
        table.render({
            elem: '#allrsyncTable'
            , url: "/selectallrsync/"
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code,    //解析接口状态
                    "count": res.count,  //解析数据长度
                    "page": res.page,   //当前页
                    "limit": res.limit,  //当前页数据条数
                    "data": res.data,  //解析数据列表
                    "pages": res.pages
                };
            }
            , response: {
                statusCode: 200 //规定成功的状态码，默认：0
            }
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , page: true
            , id: 'table'
            , defaultToolbar: ['filter']
            , title: 'rsync数据表'
            , height: 'full-200'
            , cols:
                [
                    [
                        {type: 'checkbox', fixed: 'left'}
                        // id  为数据库中字段名
                        , {field: 'id', title: 'id', width: 90, fixed: 'left', align: 'center', sort: true}
                        , {field: 'source_ip', title: '源ip', width: 150, align: 'center'}
                        , {field: 'source_path', title: '源地址---目录', width: 340, align: 'center'}
                        , {field: 'destination_ip', title: '目的ip', width: 150, align: 'center'}
                        , {field: 'destination_path', title: '目的地址---目录', width: 340, align: 'center'}
                        , {
                        field: 'rsync_result_value', title: '结果', width: 100, align: 'center', templet: function (t) {
                            //如果是1则为管理员，颜色为红色；如果是0，则为非管理员，颜色为绿色
                            var result_num = t.rsync_result_value;
                            if (result_num == 0) {
                                return "<span style='color:red'>Succeed</span>"
                            } else if (result_num == 1) {
                                return "<span style='color: #00FF00'>Unsuccessful</span>"
                            }
                            else  {
                                return "<span style='color: #8600FF '>没执行</span>"
                            }
                        }
                    }

                        , {field: 'create_time', title: '添加时间', width: 200, align: 'center'}
                        , {field: 'rsync_result_sc', title: '输出', width: 100, align: 'center'}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center'}
                    ]
                ]

        });


        //监听头部工具栏事件
        table.on("toolbar(allrsyncTable)", function (obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                switch (layEvent) {
                    case "add":   // 添加 rsync 任务
                        addRsync();
                        break;

                    case 'allDelete':    // 批量删除
                        var checkStatus = table.checkStatus(obj.config.id)
                            , data = checkStatus.data; //获取选中的数据
                        //console.log(data)
                        if (checkStatus.data.length > 0) {  //有选择的的数据行
                            var ids = [];
                            //定义一个数组，用于存储选中行的id
                            //使用for循环将选中的数据信息保存在数组中
                            for (let i = 0; i < checkStatus.data.length; i++) {
                                ids[i] = checkStatus.data[i].id;  // 注意这里的id 字段
                            }
                            //实践证明，在这里ajax是不能向后台发送数组数据的，所以需要对数据进行转换，可以转换成字符串
                            var idsString = ids.join(",");//分隔符，用啥分割，在后台就用啥拆分。
                            //console.log(idsString)
                            //现在数组已经拿到了数据，那我下来就是看能否将数组传递给后台进行删除，删除之前进行判断确认
                            layer.confirm("确认删除这" + checkStatus.data.length + "条数据吗？", {
                                icon: 3,
                                title: "删除提示"
                            }, function (index) {
                                layer.open({
                                    title: '删除信息'
                                    , type: 1
                                    , closeBtn: false
                                    , area: '300px;'
                                    , shade: 0.8
                                    , id: 'LAY_layuipro'
                                    , btn: ['保存', '取消']
                                    , content: '是否删除'
                                    , success: function (layero) {
                                        var btn = layero.find('.layui-layer-btn');
                                        var csrf_token = $("input[name='csrfmiddlewaretoken']").val();
                                        btn.find('.layui-layer-btn0').click(function () {
                                            $.ajax({
                                                //几个参数需要注意一下
                                                type: "post",  //方法类型
                                                url: "/rsync_delete_all/",  // 跳转的url
                                                data: {
                                                    "ids": idsString,
                                                    'csrfmiddlewaretoken': csrf_token
                                                },
                                                dataType: "json",
                                                async: false,
                                                traditional: true,
                                                success: function (result) {
                                                    // console.log(result.code)
                                                    if (result.code == 200) {
                                                        layer.msg("删除成功");
                                                        setTimeout(function () {
                                                            //重新加载当前页面
                                                            location.reload();
                                                        }, 1000);
                                                    } else (
                                                        layer.msg("删除失败")
                                                    )
                                                }
                                            });
                                            //关闭弹出层页面
                                            layer.close(index);
                                        });
                                    }
                                });
                            });
                        } else {
                            layer.msg("请选择删除的数据！");
                        }
                }
            }
        );


        function addRsync(data) {
            var index = layui.layer.open({
                title: "添加rsync任务",
                type: 2,
                content: "/rsynchosts/",
                area: ["1300px", "800px"],
                maxmin: true,
                success: function (layero, index) {
                    var body = layui.layer.getChildFrame('body', index);
                    setTimeout(function () {
                        layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    }, 100)
                }
            })
        }


        //模糊查询
        $('.dataFrm .search_btn').on('click', function () {
            var source_ip = $('#source_ip').val();
            var destination_ip = $('#destination_ip').val();

            //执行重载
            if (destination_ip == "" && source_ip == "") {
                layer.msg('查询全部数据', function () {
                    window.location = 'rsyncall/';   //  这个地方的跳转 ，前面没有加 /  是因为 跳转的时候默认会在 前面加上 /index/
                });
            } else {
                table.reload('table', {
                    url: "/searchrsync/"
                    , method: "get"
                    , where: {
                        "source_ip": source_ip,
                        "destination_ip": destination_ip,
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })
            }
        });

        // 工具条事件  就是操作那一栏
        table.on('tool(allrsyncTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            // console.log(data)
            if (layEvent === 'startrsync') { //  开始

                //console.log(data)
                //console.log(data.source_ip)
                //console.log(data.source_path)
                //console.log(data.destination_ip)
                // console.log(data.destination_path)

                // 跳转执行 rsync 命令
                //监听提交

                var remotehostLY = data.source_ip;
                // 源 目录
                var path_laiyuan = data.source_path;

                // 目的 ip
                var remotehostMD = data.destination_ip;
                // 目的 目录
                var path_mudi = data.destination_path;
                var csrf_token = $("input[name='csrfmiddlewaretoken']").val();
                // 'csrfmiddlewaretoken': csrf_token  ajex跳转的必须要加上这个
                $.ajax({
                    type: "post",
                    url: "/rsyncstart/",    // 把html输入的数值传给 后边的py代码处理
                    data: {
                        "remotehostLY": remotehostLY,
                        "path_laiyuan": path_laiyuan,
                        "remotehostMD": remotehostMD,
                        "path_mudi": path_mudi,
                        'csrfmiddlewaretoken': csrf_token,
                    },
                    success(res) {
                        if (res.code === 200) {
                            layer.msg(res.msg, {icon: 5});      // 5 为笑脸
                        } else {
                            layer.msg(res.msg, {icon: 6});
                        }
                    }
                });


            }
        });


    });
</script>
</body>
</html>
